<template>
	<uv-tabbar 
		:value="value" 
		:activeColor="activeColor" 
		:inactiveColor="inactiveColor" 
		v-if="list.length" placeholder
	>
		<uv-tabbar-item :text="e.text" v-for="(e,i) in list" :key="i" @click="toRoute(e.path, i)" >
			<template v-slot:active-icon>
				<uv-icon :name="e.active" />
			</template>
			<template v-slot:inactive-icon>
				<uv-icon :name="e.inactive" />
			</template>
		</uv-tabbar-item>
	</uv-tabbar>
</template>

<script>
	import { getIconPath } from '@/util'
	export default {
		name: "lst-tabbar",
		props: {
			value: {
				type: Number,
				default: 0
			},
			list: {
				type: Array,
				default: () => []
			},
			activeColor: {
				type: String,
				default: '#CC2B23'
			},
			inactiveColor: {
				type: String,
				default: '#333333'
			},
			isClick: {
				type: Boolean,
				default: false,
			}
		},
		data() {
			return {
				getIconPath
			}
		},
		methods: {
			toRoute(url, i) {
				if(this.isClick) return this.$emit('ok', i)
				if(!url) return
				uni.navigateTo({ url })
			}
		}
	}
</script>